<template>
    <div>
  <div class="lbt">
        <div class="f1">
    <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(val,ind) in f1" :key="ind" @click="xiangqing(val.id)">
        <img :src="val.img" :alt="val.id">
        </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
        </div>
   <div class="r1">
     <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(val,ind) in r1" :key="ind"  @click="xiangqing(val.id)">
        <img :src="val.img" :alt="val.id">
        </div>
      
    </div>
   </div>
  </div>
   <div class="r2">
     <div class="swiper-container">
    <div class="swiper-wrapper">
 <div class="swiper-slide" v-for="(val,ind) in r2" :key="ind"  @click="xiangqing(val.id)">
        <img :src="val.img" :alt="val.id">
        </div>
    </div>
   </div>
  </div>
  </div>

  <div class="floor">
      <p class="floor-h2">热门项目<span>>>更多热门</span></p>
      <ul class="clearfix">
        <li class="floor-hot" v-for="(val,ind) in remena" :key="ind" @click="xiangqing(val.c_id)">
          <div class="floor_inner">
            <div class="floor-txt"><p class="floor-h3">{{val.c_name}}</p>
          <p class="floor-text">{{val.c_detailes}}</p>
          <div class="floor-person">支持人数：{{val.c_support}}</div>
          <div class="floor-yichou">已筹：<span>￥{{val.c_arrive}}</span></div></div>
          <div class="floor-img"><img :src="val.cs_img"/></div>
          </div>
        </li>
      </ul>
  </div>

   <div class="floor">
      <p class="floor-h2">即将上线<span>>>更多新品</span></p>
      <ul class="clearfix">
        <li class="floor-hot floor-news" v-for="(val,ind) in news" :key="ind" @click="xiangqing(val.c_id)">
          <div class="floor_inner">
            <div class="floor-txt"><p class="floor-h3">{{val.c_name}}</p>
          <p class="floor-text">{{val.c_detailes}}</p>
          <div class="floor-person">支持人数：{{val.c_support}}</div>
          <div class="floor-yichou">已筹：<span>￥{{val.c_arrive}}</span></div></div>
          <div class="floor-img"><img :src="val.cs_img"/></div>
          </div>
        </li>
      </ul>
  </div>

   <div class="floor">
      <p class="floor-h2">即将结束<span>>>更多</span></p>
      <ul class="clearfix">
        <div v-for="(val,ind) in ends" :key="ind">
          <li class="floor-hot floor-ends" @click="xiangqing(val.c_id)"  v-if="ind<=3">
          <div class="floor_inner">
            <div class="floor-img"><img :src="val.cs_img"/></div>
            <div class="floor-txt"><p class="floor-h3">{{val.c_name}}</p>
          <p class="floor-text">{{val.c_detailes}}</p>
          <div class="floor-person">支持人数：{{val.c_support}}</div>
          <div class="floor-yichou">已筹：<span>￥{{val.c_arrive}}</span></div></div>
          
          </div>
        </li>
        </div>
      </ul>
  </div>

   <div class="floor">
      <p class="floor-h2">往期项目<span>>>更多</span></p>
      <ul class="clearfix">
        <div v-for="(val,ind) in yjend" :key="ind">
          <li class="floor-hot floor-ends" @click="xiangqing(val.c_id)"  v-if="ind<=3">
          <div class="floor_inner">
            <div class="floor-img"><img :src="val.cs_img"/></div>
            <div class="floor-txt"><p class="floor-h3">{{val.c_name}}</p>
          <p class="floor-text">{{val.c_detailes}}</p>
          <div class="floor-person">支持人数：{{val.c_support}}</div>
          <div class="floor-yichou">已筹：<span>￥{{val.c_arrive}}</span></div></div>
          
          </div>
        </li>
        </div>
      </ul>
  </div>
    </div>
</template>

<script>
export default {
 
data () {
    return {
        f1:[],
        r1:[],
        r2:[],
        c_id:"",
        remena:"",
        news:"",
        ends:[],
        yjend:[]
    }
},
mounted () {
      var swiper = new Swiper('.swiper-container', {
      centeredSlides: true,
       observer:true,
      observeParents:true,
       loop: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      
      // navigation: {
      //   nextEl: '.swiper-button-next',
      //   prevEl: '.swiper-button-prev',
      // },
    }); 
    this.$axios.post("http://127.0.0.1:8081/client/crowdpro",{
      data:new Date().getTime()
    }).then(res=>
    {
      //  console.log(res.data.crowd);
      console.log(res.data.val)
      // console.log(res.data.crowd);
      let result=res.data.val[0];
      for(let i=0;i<result.length;i++)
      {
        if(result[i].cs_id==1)
        {
          this.f1.push({img:result[i].cs_img,id:result[i].c_id});
        }
        else if(result[i].cs_id==2){
         this.r1.push({img:result[i].cs_img,id:result[i].c_id});
        }
        else if(result[i].cs_id==3){
         this.r2.push({img:result[i].cs_img,id:result[i].c_id});
        }
      }
      this.remena=res.data.val[1];
      this.news=res.data.val[2];
      let nends=res.data.val[3];
      for(let j=0;j<nends.length;j++)
      {
        // console.log(this.ends[j].c_day);
        let currentday=new Date().getTime()+3*24*60*60*1000;
        // console.log(currentday);
        // console.log(new Date(this.ends[j].c_day).getTime());
        if(currentday>new Date(nends[j].c_day).getTime()&&new Date().getTime()<new Date(nends[j].c_day).getTime())
        {
          nends[j].end=true;
        }
        else{
          nends[j].end=false;
        }
        // console.log(new Date(nends[j].c_day).getTime(),new Date().getTime())
        if(new Date().getTime()>new Date(nends[j].c_day).getTime())
        {
          nends[j].yjend=true;
        }
        else{
          nends[j].yjend=false;
        }
      }
      for(let i=0;i<nends.length;i++)
      {
        console.log(nends[i].end)
        if(nends[i].end)
        {
          this.ends.push(nends[i])
        }
        if(nends[i].yjend)
        {
          this.yjend.push(nends[i])
        }
      }
      console.log(this.yjend)
      // console.log(this.f1);
      // console.log(this.r1);
      // console.log(this.r2)
    })
},
methods: {
  xiangqing(id)
  {
  
  this.$router.push({path:"/crowddetailes",query:{c_id:id}})
  },
}
}
</script>

<style scoped>
.lbt{
  width: 1080px;
  height: 480px;
  margin: 20px auto;
  position: relative;

}
.lbt .f1{
  width: 1080px;
  position:absolute; 
  left: 0;
}
.lbt .f1 .swiper-wrapper .swiper-slide{
  width: 760px;
  overflow: hidden;
}
.lbt .f1 .swiper-wrapper .swiper-slide img{
  width: 760px;
  height: 480px;
}
.lbt .swiper-container img{
  display: block;
   z-index: 1;
}
.lbt .r1{
  width: 320px;
  overflow: hidden;
  position: absolute;
  right: 0;
}
.lbt .r2{
  width: 320px;
  overflow: hidden;
  position: absolute;
  right: 0;
  top:240px;
}
/* .lbt .swiper-button-next i{
z-index: 9999;
} */

.floor .floor-hot{
  width: 248px;
  border: 1px solid #999;
  float: left;
  margin: 0 10px;
  cursor: pointer;
  /* background: rgb(230, 239, 236) */
  /* height: 20px;; */
}

.clearfix::after{
        clear: both;
    display: block;
    height: 0;
    overflow: hidden;
    /* font-size: 0; */
    content: ""
}
.floor-h2{   
   height: 58px;
    line-height: 58px;
    font-size: 26px;
    color: #333;
    font-weight: 900;
    font-family: "Microsoft Yahei";
    margin-bottom: 10px;}
    .floor-h2 span{
      float: right;
      font-size: 16px;
      font-weight: normal;
      margin-right: 10px;
      cursor: pointer;
        }
      .floor-h2 span:hover{
        color: #F18D00;

      }
    .floor{
      width: 1080px;
      margin: 0 auto
    }
    /* .floor_inner{
      padding: 20px;
    } */
    .floor-h3{
          height: 33px;
    margin: 5px 0 10px;
    font-size: 22px;
    color: #333;
    overflow: hidden;
    }
    .floor-text{
          height: 36px;
    font-size: 12px;
    color: #999;
    overflow: hidden;
    }
    .floor-person{
          margin-top: 10px;
    color: #5d5a5a;
    }
    .floor-yichou{
      line-height: 30px;
    margin-top: 10px;
    color:#999
    }
    .floor-yichou span{
          margin-left: 10px;
    font-size: 20px;
    color: #ff9f41;
    }
    .floor-img{
      text-align: center
    }
    .floor-img img{
      width: 200px;
      height: 150px;
    }
    .floor-txt{
     padding: 20px 0 0 20px;
       background: rgb(230, 239, 236)

    }
    .floor .floor-hot:hover{
box-shadow: 3px 3px 10px #888888;
    }
    .floor-news .floor-txt{
      background: rgb(236, 233, 244) !important;
     
    }
     .floor-ends .floor-txt{
background:  rgb(249, 243, 233)
     }
    ul{
      margin-bottom: 10px;
    }

</style>
